<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>郑州市土壤环境监管平台</title>
  <link rel="stylesheet" type="text/css" href="./public/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="./public/css/base.css">
  <script src="./public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="./public/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
      background-color: rgba(245, 245, 245, 1);
    }

    .container-left a,
    .container-right a {
      padding: 5px 10px;
      font-size: 14px;
      box-sizing: border-box;
      height: 43px;
      display: flex;
      align-items: center;
    }

    .container-left .logo-img {
      height: 33px;
      width: 60px;
      object-fit: cover;
    }

    .login-btn,
    .register-btn {
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px solid rgba(0, 103, 221, 1);
      color: rgba(0, 103, 221, 1);
      margin-left: 20px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      height: 33px;
    }

    .register-btn {
      background-color: rgba(0, 103, 221, 1);
      border: 1px solid rgba(0, 103, 221, 1);
      color: #fff;
    }

    .carousel-item img {
      height: 500px;
    }

    .carousel-desc {
      position: absolute;
      right: 15%;
      bottom: 30%;
      left: 15%;
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
      color: #fff;
    }

    .carousel-desc h2 {
      font-size: 40px;
      font-weight: 700;
      line-height: 60px;
    }

    .carousel-desc p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }

    .carousel-desc a {
      border-radius: 16px;
      font-size: 12px;
      height: 32px;
      line-height: 32px;
      margin-top: 36px;
      width: 96px;
      border: 1px solid #fff;
      color: #fff;
      font-weight: 400;
      display: block;
      text-align: center;
    }

    .count-wrap {
      padding: 15px 0;
      background-color: rgba(239, 239, 239, 1);
      overflow: hidden;
    }


    .count-wrap .count-item-left img {
      width: 50px;
    }

    .count-wrap .count-num {
      color: #000;
      font-weight: 600;
      font-size: 18px;
    }

    .count-wrap .count-name {
      color: #666666;
      font-size: 14px;
    }

    .container .section-title {
      color: #000;
      font-size: 40px;
      margin-bottom: 16px;
      font-weight: 600;
      text-align: center;
      margin-top: 91px;
    }

    .container .section-desc {
      font-size: 18px;
      color: #666666;
      margin: 0 auto 32px auto;
      text-align: center;
    }

    /* 降本增效，加速企业数字化转型 */

    .scroller-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 32px;
      margin-bottom: 48px;
    }

    .scroller-content {
      overflow-x: auto;
      white-space: nowrap;
      flex-grow: 1;
    }

    .scroller-content::-webkit-scrollbar {
      display: none;
    }

    .scroll-item {
      display: inline-block;
      padding: 0 20px;
    }

    .left-arrow,
    .right-arrow {
      cursor: pointer;
      z-index: 2;
      padding: 10px;
      user-select: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(240, 240, 240, .5);
    }

    .left-arrow {
      left: 0;
    }

    .right-arrow {
      right: 0;
    }

    .product-nav-item-title {
      cursor: pointer;
      font-size: 18px;
      border-bottom: 2px solid transparent;
      width: fit-content;
      padding: 0 20px;
      margin: auto;
    }

    .product-nav-item-title.active {
      border-bottom-color: #000;
    }

    .product-nav-item-desc span {
      cursor: pointer;
      font-size: 12px;
    }

    .product-nav-item-title:hover,
    .product-nav-item-desc span:hover {
      font-weight: bold;
      border-color: #000;
    }


    .product-card {
      padding: 50px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      background: #fff;
    }

    .product-card img {
      height: 64px;
      width: 64px;
      margin-bottom: 24px;
    }

    .product-card h5 {
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 8px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-card p {
      color: #595959;
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .product-card .product-infotag {
      display: inline-flex;
      padding-top: 8px;
      text-align: center;
    }

    .product-card .market_choosen_transport_tag,
    .product-card .market_common_transport_tag {
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px;
      margin: 0 2px;
      padding: 2px 4px;
      text-align: center
    }

    .product-card .market_choosen_support {
      background: linear-gradient(45deg, #fcf0f1, #ffe6e7);
      color: #d71310;
      display: inline-block;
    }

    .product-card .market_common_transport {
      background-color: rgba(89, 89, 89, .1);
      color: #595959;
    }

    .product-card .price {
      color: #191919;
      font-size: 24px;
      font-weight: 700;
      line-height: 30px;
      margin-top: 36px;

    }

    .product-card .price span {
      color: #191919;
      font-size: 12px;
      font-weight: 400;
      line-height: 16px
    }

    .product-card .price span.money {
      font-size: 24px;
      font-weight: 700;
      line-height: 30px;
      margin-right: 2px
    }

    .product-card .price span.price-unit {
      margin-left: 2px
    }

    /* 解决方案专区 */

    .option-warp .top-img img {
      width: 100%;
      height: 200px;
    }

    .option-warp .bottom-text {
      padding: 20px;
      background-color: #fff;
    }

    .option-warp .bottom-text .bottom-text-title {
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .option-warp .bottom-text .bottom-text-desc {
      color: rgba(128, 128, 128, 1);
      font-size: 14px;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    /* 合作品牌 */
    @keyframes scrollToRight {
      from {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
      }

      to {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
      }
    }

    .brand-warp {
      padding-top: 91px;
      overflow: hidden;
      padding-bottom: 52px;
    }

    .brand-warp .logo_wrap {
      position: relative;
      width: 1440px;
      overflow: hidden;
      margin: 0 auto;
      font-size: 0;
    }

    .brand-warp .warp-title {
      font-size: 40px;
      font-weight: bold;
      color: #0d0d0d;
      line-height: 1;
      text-align: center;
      margin-bottom: 26px;
    }

    .brand-warp .warp-doc {
      font-size: 18px;
      font-weight: 400;
      color: #6d6d6d;
      line-height: 1;
      margin-bottom: 52px;
      text-align: center;
    }

    .brand-warp .logo_wrap .left_mask {
      position: absolute;
      z-index: 10;
      left: -112px;
      width: 360px;
      height: 100%;
    }

    .brand-warp .logo_wrap .right_mask {
      position: absolute;
      z-index: 10;
      right: -112px;
      width: 360px;
      height: 100%;
    }

    .brand-warp .logo_wrap .line_odd {
      width: 3360px;
      height: 100px;
      animation: scrollToRight 36s linear infinite;
    }

    .brand-warp .logo_wrap .line_even {
      width: 3360px;
      animation: scrollToRight 30s linear infinite;
    }

    .brand-warp .logo_wrap .line_odd .logo_img {
      width: 50%;
      display: inline-block;
    }

    .brand-warp .logo_wrap .line_even .logo_img {
      width: 50%;
      display: inline-block;
    }

    .brand-warp .logo_wrap .line_top1 {
      position: relative;
    }

    .brand-warp .logo_wrap .line_top0 .logo_img:last-child {
      position: relative;
    }

    .brand-warp .logo_wrap .line_top2 {
      position: relative;
    }

    .brand-warp .logo_wrap .line_top2 .logo_img:last-child {
      left: 20px;
    }

    .brand-warp .logo_wrap .line_top3 {
      position: relative;
    }

    .brand-warp .logo_wrap .line_top4 {
      position: relative;
    }

    .brand-warp .logo_wrap .line_top1 .logo_img:last-child {
      position: relative;
      left: 20px;
    }

    .brand-warp .logo_wrap .line_top2 .logo_img:last-child {
      position: relative;
      left: 20px;
    }

    .brand-warp .logo_wrap .line_top3 .logo_img:last-child {
      position: relative;
      left: 20px;
    }

    .brand-warp .logo_wrap .line_top4 .logo_img:last-child {
      position: relative;
      left: 20px;
    }


    .f {
      background: #f3f3f3;
    }

    .foot {
      display: flex;
      padding: 80px 0;
      line-height: 1.5;
      margin: 0 auto;
    }

    .footleft .logo-img-foot {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .footleft .logo-img-foot img {
      height: 30px;
      margin-left: 5px;
    }

    .footleft div {
      display: flex;
      flex-direction: column;
      padding-left: 10px;
    }

    .footleft div .p1 {
      color: #101010;
    }

    .footleft div .p2 {
      color: #888;
    }

    .footleft div .p3 {
      color: #737373;
      padding: 15px 0 50px;
    }

    .footright {
      margin-left: auto;
      display: flex;
    }

    .footright .block {
      display: flex;
      margin-left: 25px;
      flex-direction: column;
      width: 175px;
    }

    .footright .block .title {
      color: #101010;
      margin-bottom: 20px;
      font-size: 16px;
    }

    .footright .block div {
      flex-direction: column;
      display: flex;
      font-size: 15px;
    }

    .footright .block div a {
      color: #888;
    }
  </style>
</head>

<body>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom fixed-top" style="padding: 10px 0;">
      <div class="container-fluid container">
        <div class="container-left d-flex">
          <a href="./index.html">
            <img src="./public/images/index/icon.png" class="logo-img">
          </a>
          <a href="./shop.html">数智员工商城</a>
          <a href="./solution.html">行业解决方案</a>
          <a href="./about.html">关于我们</a>
        </div>
        <div class="container-right d-flex align-items-center">
          <a href="">买家中心</a>
          <a href="">服务商中心</a>
          <div class="login-btn">登录</div>
          <div class="register-btn">注册</div>
        </div>
      </div>
    </nav>
    <!-- 轮播图 -->
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true"
          aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3" aria-label="Slide 4"></button>
        <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="4" aria-label="Slide 5"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./public/images/index/banner_1.png" class="d-block w-100" alt="First slide">
          <div class="carousel-desc">
            <h2>First slide label</h2>
            <p>Some representative placeholder content for the first slide.</p>
            <a href="">了解详情</a>
          </div>
        </div>
        <div class="carousel-item">
          <img src="./public/images/index/banner_1.png" class="d-block w-100" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img src="./public/images/index/banner_1.png" class="d-block w-100" alt="Third slide">
        </div>
        <div class="carousel-item">
          <img src="./public/images/index/banner_1.png" class="d-block w-100" alt="Fourth slide">
        </div>
        <div class="carousel-item">
          <img src="./public/images/index/banner_1.png" class="d-block w-100" alt="Fifth slide">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <div class="count-wrap">
      <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3">
        <div class="col d-flex justify-content-center">
          <div class="count-item-left">
            <img src="./public/images/index/icon.png" alt="">
          </div>
          <div class="count-item-right">
            <div class="count-num">0</div>
            <div class="count-name">合作商户</div>
          </div>
        </div>
        <div class="col d-flex justify-content-center">
          <div class="count-item-left">
            <img src="./public/images/index/icon.png" alt="">
          </div>
          <div class="count-item-right">
            <div class="count-num">0</div>
            <div class="count-name">合作商户</div>
          </div>
        </div>
        <div class="col d-flex justify-content-center">
          <div class="count-item-left">
            <img src="./public/images/index/icon.png" alt="">
          </div>
          <div class="count-item-right">
            <div class="count-num">0</div>
            <div class="count-name">合作商户</div>
          </div>
        </div>
        <div class="col d-flex justify-content-center">
          <div class="count-item-left">
            <img src="./public/images/index/icon.png" alt="">
          </div>
          <div class="count-item-right">
            <div class="count-num">0</div>
            <div class="count-name">合作商户</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 降本增效，加速企业数字化转型 -->
    <section class="section-warp product-warp">
      <div class="container">
        <h2 class="section-title">降本增效，加速企业数字化转型</h2>
        <div class="scroller-wrapper">
          <div class="scroller-content">
            <div class="scroll-item">
              <div class="product-nav-item-title active">企业应用</div>
              <div class="product-nav-item-desc mt-2"><span>协同办公</span> | <span>存储与备份</span> | <span>会议系统</span></div>
            </div>
            <div class="scroll-item">
              <div class="product-nav-item-title">服务</div>
              <div class="product-nav-item-desc mt-2"><span>协同办公</span> | <span>存储与备份</span> | <span>会议系统</span></div>
            </div>
            <div class="scroll-item">
              <div class="product-nav-item-title">基础软件</div>
              <div class="product-nav-item-desc mt-2"><span>协同办公</span> | <span>存储与备份</span> | <span>会议系统</span></div>
            </div>
            <div class="scroll-item">
              <div class="product-nav-item-title">网站建设</div>
              <div class="product-nav-item-desc mt-2"><span>协同办公</span> | <span>存储与备份</span> | <span>会议系统</span></div>
            </div>
            <div class="scroll-item">
              <div class="product-nav-item-title">安全</div>
              <div class="product-nav-item-desc mt-2"><span>协同办公</span> | <span>存储与备份</span> | <span>会议系统</span></div>
            </div>
            <div class="scroll-item">
              <div class="product-nav-item-title">行业解决方案</div>
              <div class="product-nav-item-desc mt-2"><span>协同办公</span> | <span>存储与备份</span> | <span>会议系统</span></div>
            </div>
          </div>
          <div class="scroller-arrow">
            <div class="left-arrow"> &lt; </div>
            <div class="right-arrow"> &gt; </div>
          </div>
        </div>
        <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3">
          <!-- 循环8个 -->
          <!-- <div class="col">
            <a class="product-card" href="" target="_blank">
              <div class="product-card-inner">
                <img src="./public/images/index/product.png" alt="">
                <div class="product-card-title-bg">
                  <h5>解决方案数字化平台_HCS版</h5>
                  <p>帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。</p>
                </div>
                <div class="product-infotag">
                  <div class="market_choosen_transport_tag market_choosen_support">华为商品</div>
                  <div class="market_common_transport_tag market_common_transport">信息化管理</div>
                </div>
              </div>
              <div class="price">
                <span class="money">￥</span>600,000.00<span class="price-unit">/年</span>
              </div>
            </a>
          </div> -->
        </div>
      </div>
    </section>
    <section class="section-warp option-warp">
      <div class="container">
        <h2 class="section-title">解决方案专区</h2>
        <p class="section-desc">全面、专业、智能的行业解决方案</p>
        <div class="row row-cols-2 row-cols-lg-4 g-2 g-lg-3">
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
          <div class="col">
            <div class="top-img">
              <img src="./public/images/index/option.png" alt="" />
            </div>
            <div class="bottom-text">
              <div class="bottom-text-title">金融行业专区</div>
              <div class="bottom-text-desc">围绕金融行业打造自动化、智能化解决方案，为银行/证券/保险等领域赋能</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="brand-warp">
      <div>
        <div class="warp-title">行业领先品牌的信任之选</div>
        <div class="warp-doc">深耕数字科技，助力产业升级，累计为数千家新零售企业提供了服务</div>
        <div class="logo_wrap">
          <img src="./public/images/index/brand-left.png" alt="" class="left_mask" />
          <img src="./public/images/index/brand-right.png" alt="" class="right_mask" />
          <div class="line_odd">
            <img src="./public/images/index/logo_6.png" alt="" class="logo_img">
            <img src="./public/images/index/logo_6.png" alt="" class="logo_img">
          </div>
          <div class="line_even line_top1">
            <img src="./public/images/index/logo_7.png" alt="" class="logo_img">
            <img src="./public/images/index/logo_7.png" alt="" class="logo_img">
          </div>
          <div class="line_odd line_top2">
            <img src="./public/images/index/logo_8.png" alt="" class="logo_img">
            <img src="./public/images/index/logo_8.png" alt="" class="logo_img">
          </div>
          <div class="line_even line_top3">
            <img src="./public/images/index/logo_9.png" alt="" class="logo_img">
            <img src="./public/images/index/logo_9.png" alt="" class="logo_img">
          </div>
          <div class="line_odd line_top4">
            <img src="./public/images/index/logo_10.png" alt="" class="logo_img">
            <img src="./public/images/index/logo_10.png" alt="" class="logo_img">
          </div>
        </div>
      </div>
    </section>
    <!-- 底部 -->
    <footer class="f">
      <div class="container">
        <div class="foot">
          <div class="footleft">
            <p class="logo-img-foot"><img src="./public/images/index/icon.png">企智云</p>
            <div>
              <p class="p1">联系我们</p>
              <p class="p2">技术支持：ywjk@hongkingsystem.cn</p>
              <p class="p2">赛事咨询：competition@pkucxpl.com</p>
              <p class="p3">© 2023 中国计算机学会-计算经济学专业组 CCF-TCCE</p>
            </div>
          </div>
          <div class="footright">
            <div class="block">
              <p class="title">导航</p>
              <div>
                <a href="">博金量化模型挑战赛</a>
                <a href="">博金大模型挑战赛</a>
                <a href="">只能税收挑战赛</a>
              </div>
            </div>
            <div class="block">
              <p class="title">主题赛事</p>
              <div>
                <a href="">比赛动态</a>
                <a href="">比赛社区</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
  <script>
    $(function () {
      // *************************************************************** 降本增效，加速企业数字化转型 ***************************************************************
      var scrollAmount = 200;
      // 检查箭头的初始状态
      checkArrows();
      // 左箭头点击事件
      $('.left-arrow').click(function () {
        var $scroller = $('.scroller-content');
        $scroller.stop(true).animate({ scrollLeft: '-=' + scrollAmount }, 'slow', checkArrows);
      });
      // 右箭头点击事件
      $('.right-arrow').click(function () {
        var $scroller = $('.scroller-content');
        $scroller.stop(true).animate({ scrollLeft: '+=' + scrollAmount }, 'slow', checkArrows);
      });
      // 监听滚动事件以动态显示和隐藏箭头
      $('.scroller-content').on('scroll', function () {
        checkArrows();
      });
      function checkArrows() {
        var $scroller = $('.scroller-content');
        var maxScrollLeft = $scroller[0].scrollWidth - $scroller.outerWidth(); // 计算最大可滚动距离
        var scrollLeft = $scroller.scrollLeft(); // 获取当前滚动位置
        // 根据当前滚动位置显示或隐藏左箭头
        if (scrollLeft > 0) {
          $('.left-arrow').css('opacity', 1);
        } else {
          $('.left-arrow').css('opacity', 0);
        }
        // 根据当前滚动位置显示或隐藏右箭头
        if (scrollLeft < maxScrollLeft) {
          $('.right-arrow').css('opacity', 1);
        } else {
          $('.right-arrow').css('opacity', 0);
        }
      }
      var products = [
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
        { name: '解决方案数字化平台_HCS版', desc: '帮助用户在线化、协作完成解决方案设计、验证、交付和运维事件管理，加速企业数字化转型。', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
      ];
      renderProducts(products)
      $('.product-warp .scroll-item').on('click', '.product-nav-item-title', function () {
        $('.product-nav-item-title').removeClass('active');
        $(this).addClass('active');
        var elementText = $(this).text();
        console.log('elementText', elementText);
        if (elementText === '企业应用') {
          products = [
            { name: '企业应用', desc: '企业应用=企业应用', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
          ]
        }
        if (elementText === '服务') {
          products = [
            { name: '服务', desc: '服务=服务', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
          ]
        }
        if (elementText === '基础软件') {
          products = [
            { name: '基础软件', desc: '基础软件=基础软件', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
          ]
        }
        if (elementText === '网站建设') {
          products = [
            { name: '网站建设', desc: '网站建设=网站建设', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
          ]
        }
        if (elementText === '安全') {
          products = [
            { name: '安全', desc: '安全=安全', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
          ]
        }
        if (elementText === '行业解决方案') {
          products = [
            { name: '行业解决方案', desc: '行业解决方案=行业解决方案', price: '600,000.00', image: './public/images/index/product.png', tags: ['华为商品', '信息化管理'] },
          ]
        }
        renderProducts(products)
        // 怎么重新渲染呢
      });
      function renderProducts(products) {
        var container = $('.product-warp .container .row');
        container.empty(); // 清空容器中现有的内容
        $.each(products, function (index, product) {
          var colDiv = $('<div>').addClass('col');
          var productCard = $('<a>').addClass('product-card').attr('href', '').attr('target', '_blank');
          var productCardInner = $('<div>').addClass('product-card-inner');
          var img = $('<img>').attr('src', product.image).attr('alt', '');
          var productCardTitleBg = $('<div>').addClass('product-card-title-bg');
          var h5 = $('<h5>').text(product.name);
          var p = $('<p>').text(product.desc);
          var productInfotag = $('<div>').addClass('product-infotag');
          $.each(product.tags, function (tagIndex, tag) {
            var tagDiv = $('<div>').addClass('market_choosen_transport_tag market_choosen_support').text(tag);
            productInfotag.append(tagDiv);
          });
          var price = $('<div>').addClass('price');
          var money = $('<span>').addClass('money').text('￥');
          var priceUnit = $('<span>').addClass('price-unit').text('/年');
          price.append(money, product.price, priceUnit);
          productCardInner.append(img, productCardTitleBg.append(h5, p), productInfotag);
          productCard.append(productCardInner, price);
          colDiv.append(productCard);
          container.append(colDiv);
        })
      }

      // 假设你有如下数据对应每一张幻灯片
      var countData = [
        { num: '0', name: '合作商户' },
        { num: '1', name: '合作商户' },
        { num: '2', name: '合作商户' },
        { num: '3', name: '合作商户' },
        { num: '4', name: '合作商户' },
      ];

      // 初始化Bootstrap Carousel
      $('#carouselExample').on('slide.bs.carousel', function (event) {
        // 获取当前活动slide的索引
        var slideIndex = $(event.relatedTarget).index();

        // 更新.count-wrap中的内容
        $('.count-wrap .count-item-right').each(function(index, element) {
          $(element).find('.count-num').text(countData[slideIndex].num);
          $(element).find('.count-name').text(countData[slideIndex].name);
        });
      });

      // 触发第一次滑动以确保初始状态正确
      $('#carouselExample').trigger('slide.bs.carousel');

    });
  </script>
</body>

</html>